{% extends 'base.html' %}
{% block title %}我的成绩{% endblock %}

{% block content %}

<h3>学生成绩简单可视化</h3>
<div class="panel panel-default">
            <div class="panel-heading">学生成绩</div>
            <div class="panel-body">
                <div id="chart" style="width: 100%px;height: 500px" ></div>
            </div>
        </div>

<script>
    {#初始化 echarts 对象#}
    var mychart = echarts.init(document.getElementById('chart'));

    {# 首先声明JS数组以便存放数据 #}
    var math_series_data = [];
    var xAxis_data = [];
    var english_series_data = [];
    var C_series_data = [];
    var java_ser_data = [];
    {# 使用for循环将数据库展示数据添加到声明数组中 #}
    {% for stu in objs %}
        math_series_data.push({{ stu.math }})
        xAxis_data.push("{{ stu.sname }}")
        english_series_data.push({{ stu.english }})
        C_series_data.push({{ stu.Clanguage }})
        java_ser_data.push({{ stu.JavaGrade }})
    {% endfor %}
    var legends = ['高数','英语']
    {#可视化展示选项#}
    // 指定图表的配置项和数据
        var option = {
            title: {
                text: '各科成绩',
                textAlign:"auto",
                left:"center",
            },
            legend: {
                data: ['高数','英语','C语言','JAVA'],
                bottom:0,
            },
            tooltip: {},

            xAxis: {
                data: xAxis_data
            },
            yAxis: {},
            series: [
                {
                    name: '高数',
                    data: math_series_data,
                    type: 'bar',
                    color: 'rgb(130, 197, 105)'
                },
                {
                    name: '英语',
                    data: english_series_data,
                    type: 'bar',
                    color: "rgb(213, 58, 53)"

                },
                {
                    name: 'C语言',
                    data: C_series_data,
                    type: 'line',
                    color: "rgb(233, 143, 111)"
                },
                {
                    name:'JAVA',
                    data: java_ser_data,
                    type: 'line',
                    color: "rgb(0, 123, 255)"
                }
            ],
            bottom:0,
        };
    {#将 echarts对象与展示选项结合起来#}
    mychart.setOption(option);

</script>
{% endblock %}
